{% extends "base.html" %}

{% block content %}
<div class="row align-items-center pt-3 pb-2 mb-3 border-bottom">
    <div class="col-md-4">
        <h1 class="h2 mb-0">网站管理</h1>
    </div>
    <div class="col-md-4 text-center">
        <div class="text-muted small">
            <i class="bi bi-arrow-clockwise me-1"></i>
            最后更新: <span id="lastUpdate">刚刚</span>
        </div>
    </div>
    <div class="col-md-4 text-end">
        <div class="btn-group">
            <a href="{{ url_for('main.create_website') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-1"></i>添加网站
            </a>
            <a href="{{ url_for('main.import_websites') }}" class="btn btn-success">
                <i class="bi bi-upload me-1"></i>批量导入
            </a>
        </div>
    </div>
</div>

{% if websites %}
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th style="width: 15%;">网站名称</th>
                <th style="width: 25%;">URL</th>
                <th style="width: 10%;">状态</th>
                <th style="width: 10%;">检查间隔</th>
                <th style="width: 10%;">响应时间</th>
                <th style="width: 15%;">最后检查</th>
                <th style="width: 15%;">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for website in websites %}
            <tr>
                <td>{{ website.name }}</td>
                <td><a href="{{ website.url }}" target="_blank">{{ website.url }}</a></td>
                <td>
                    {% if website.status == 'up' %}
                        <span class="badge bg-success">正常</span>
                    {% elif website.status == 'down' %}
                        <span class="badge bg-danger">故障</span>
                    {% else %}
                        <span class="badge bg-secondary">未知</span>
                    {% endif %}
                </td>
                <td>{{ website.check_interval }}秒</td>
                <td>
                    {% if website.response_time %}
                        {{ "%.2f"|format(website.response_time) }}s
                    {% else %}
                        -
                    {% endif %}
                </td>
                <td>
                    {% if website.last_check %}
                        {{ website.last_check.strftime('%Y-%m-%d %H:%M') }}
                    {% else %}
                        从未检查
                    {% endif %}
                </td>
                <td style="min-width: 180px;">
                    <div class="btn-group" role="group">
                        <a href="{{ url_for('main.check_now', website_id=website.id) }}" class="btn btn-sm btn-outline-success" title="立即检测">
                            <i class="bi bi-arrow-clockwise"></i>
                        </a>
                        <a href="{{ url_for('main.edit_website', website_id=website.id) }}" class="btn btn-sm btn-outline-primary" title="编辑">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <a href="{{ url_for('main.website_alert', website_id=website.id) }}" class="btn btn-sm btn-outline-warning" title="告警配置">
                            <i class="bi bi-bell"></i>
                        </a>
                        <a href="{{ url_for('main.website_logs', website_id=website.id) }}" class="btn btn-sm btn-outline-info" title="查看日志">
                            <i class="bi bi-journal-text"></i>
                        </a>
                        <a href="{{ url_for('main.website_alerts', website_id=website.id) }}" class="btn btn-sm btn-outline-secondary" title="告警日志">
                            <i class="bi bi-bell"></i>
                        </a>
                        <form method="POST" action="{{ url_for('main.delete_website', website_id=website.id) }}" class="d-inline" onsubmit="return confirm('确定要删除此网站吗？')">
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="删除">
                                <i class="bi bi-trash"></i>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-5">
    <i class="bi bi-inbox" style="font-size: 4rem; color: #6c757d;"></i>
    <h4 class="mt-3 text-muted">暂无监控网站</h4>
    <p class="text-muted">开始添加您的第一个监控网站</p>
    <a href="{{ url_for('main.create_website') }}" class="btn btn-primary">添加网站</a>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
function updateWebsitesList() {
    fetch('/api/websites')
        .then(response => response.json())
        .then(websites => {
            const tbody = document.querySelector('table tbody');
            if (tbody && websites.length > 0) {
                tbody.innerHTML = '';
                websites.forEach(website => {
                    const statusBadge = website.status === 'up' ? 
                        '<span class="badge bg-success">正常</span>' : 
                        website.status === 'down' ? 
                        '<span class="badge bg-danger">故障</span>' : 
                        '<span class="badge bg-secondary">未知</span>';
                    
                    const responseTime = website.response_time ? 
                        parseFloat(website.response_time).toFixed(2) + 's' : '-';
                    
                    const row = `
                        <tr>
                            <td>${website.name}</td>
                            <td><a href="${website.url}" target="_blank">${website.url}</a></td>
                            <td>${statusBadge}</td>
                            <td>${website.check_interval}秒</td>
                            <td>${responseTime}</td>
                            <td>${website.last_check}</td>
                            <td style="min-width: 180px;">
                                <div class="btn-group" role="group">
                                    <a href="/websites/${website.id}/check-now" class="btn btn-sm btn-outline-success" title="立即检测">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </a>
                                    <a href="/websites/${website.id}/edit" class="btn btn-sm btn-outline-primary" title="编辑">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="/websites/${website.id}/alert" class="btn btn-sm btn-outline-warning" title="告警配置">
                                        <i class="bi bi-bell"></i>
                                    </a>
                                    <a href="/websites/${website.id}/logs" class="btn btn-sm btn-outline-info" title="查看日志">
                                        <i class="bi bi-journal-text"></i>
                                    </a>
                                    <a href="/websites/${website.id}/alerts" class="btn btn-sm btn-outline-secondary" title="告警日志">
                                        <i class="bi bi-bell"></i>
                                    </a>
                                    <button onclick="deleteWebsite(${website.id})" class="btn btn-sm btn-outline-danger" title="删除">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });
                
                // 更新最后更新时间
                document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString();
            }
        })
        .catch(error => console.error('更新数据失败:', error));
}

function deleteWebsite(websiteId) {
    if (confirm('确定要删除此网站吗？')) {
        fetch(`/websites/${websiteId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        }).then(() => {
            location.reload();
        });
    }
}

// 页面加载完成后开始定时刷新
document.addEventListener('DOMContentLoaded', function() {
    // 每30秒刷新一次
    setInterval(updateWebsitesList, 30000);
});
</script>
{% endblock %}